<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core_1_1" %>
<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="nav-del">
    <span>出游队伍</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <form method="post" id="searchForm">
        <%--不支持回显功能--%>
        <input type="text" id="searchGroup" name="searchGroup">
        <button type="button" id="start-search-group">查询队伍</button>
    </form>
</div>
<hr>

<%--展示查询结果和删除按钮--%>
<table width="100%" align="center">
    <thead>
    <tr>
        <th>出游地</th>
        <th>人数</th>
        <th><u>队伍名</u></th>

    </tr>
    </thead>
    <tbody width="100%" align="center">
    <%--尝试通过c:forEach来打印队伍消息--%>
    <%--
        1.如果遍历的是List这种Java中的容器，不用指定begin和end
            这里不涉及到暂存项，问题不大
        2.尝试改成groups，看看是否有问题
    --%>
    <c:forEach items="${searchedGroups}" var="group">
        <tr>
            <td>${group.destinations}</td>
            <td>${group.numOfPeople}</td>
            <td>${group.groupName}</td>
            <td><button>删除</button></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
<%--css--%>
<style type="text/css">
    .nav-del{
        margin-top: 3%;
    }
    #searchForm{
        /*float: right;*/
        margin-left: 300px;
    }

</style>
<%--js--%>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
    $(function () {
        /*队伍查询*/
        $("#start-search-group").click(function () {
            var sgroup = $("#searchGroup").val();
            //判别搜索栏是否为空
            if (isEmpty(sgroup)) {
                //无反应
                return;
            }

            //$.post提交
            $.post("/admin/adminSearch",{
                searchGroup:$("#searchGroup").val()
            },function (data) {
                //将本页面中的table加载到当前页面
                // $("#adminSearchResult").load("/adminSearch.jsp table");
                console.log(data);
                <c:if test="${empty searchedGroups}">
                    var msg="没有把值传过来";
                    console.log(msg);
                </c:if>
            });
            //load当前页面的table
        });
    });

    /**
     * 判断字符串是否为空：账户 / 密码
     * @param str
     * @returns {boolean}
     */
    function isEmpty(str) {
        if (str == null || str.trim() == "") {
            return true;
        }
        return false;
    }
</script>
</html>
